<template>
  <div style="width: auto;height: auto; overflow: hidden;">
    <div v-if="isLoading" class="loading">加载中...</div>
    <div v-if="hasError" class="error">加载失败，请稍后重试。</div>
    <iframe ref="iframeRef" src="/陪诊html5/customer_index.html" width="100%" @load="onIframeLoad" @error="onIframeError"></iframe>
  </div>
</template>

<script>
export default {
  name: 'IframeHtml',
  data() {
    return {
      iframeRef: null,
      isLoading: true,
      hasError: false
    };
  },
  methods: {
    onIframeLoad() {
      this.isLoading = false;
      this.hasError = false;
      const iframe = this.$refs.iframeRef;
      if (iframe) {
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
      }
    },
    onIframeError() {
      this.isLoading = false;
      this.hasError = true;
    }
  }
};
</script>

<style scoped>
.loading {
  text-align: center;
  padding: 20px;
  font-size: 18px;
}

.error {
  text-align: center;
  padding: 20px;
  font-size: 18px;
  color: red;
}

iframe {
  border: none;
}
</style>